<template>
  <van-dropdown-menu>
    <van-dropdown-item :title="title" ref="item" @click="openSelect(title)">
      <van-picker :columns="columns" ref="picker"></van-picker>
      <div style="padding: 5px 16px" class="btn-father">
        <van-button
          type="danger"
          block
          round
          @click="onConfirm(0)"
          class="cancel-btn"
          >取消</van-button
        >
        <van-button
          type="danger"
          block
          round
          @click="onConfirm(1)"
          class="determine-btn"
          >确认</van-button
        >
      </div>
    </van-dropdown-item>
  </van-dropdown-menu>
</template>

<script>
export default {
  name: 'CasSelect',
  props: {
    value1: {
      default: 0,
    },
    title: {
      type: String,
    },
    columns: {
      default: () => {
        ;[]
      },
    },
  },
  data() {
    return {
      selectId: null,
    }
  },
  methods: {
    onConfirm(flag) {

      // 判断flag是1还是0，看点击的是取消还是确定
      if (flag) {
        // 如果选择的条件是地铁，就走下方逻辑
        // console.log(this.$refs.picker.getValues()[2].value == "null" )
        if (this.$refs.picker.getValues()[0].text === '地铁') {
          // 判断地铁的第三项是不是不限
          if (!(this.$refs.picker.getValues()[2])) {
             this.selectId = this.$refs.picker.getValues()[1].value 
          } else { //如果不是不限就拿id
          if(this.$refs.picker.getValues()[2].value === "null"){
            this.selectId = this.$refs.picker.getValues()[1].value
          }else{
            if (this.$refs.picker.getValues()[1]) {
              this.$refs.picker.getValues()[2]
                ? (this.selectId =
                    this.$refs.picker.getValues()[
                      this.$refs.picker.getValues().length - 1
                    ].value)
                : (this.selectId =
                    this.$refs.picker.getValues()[
                      this.$refs.picker.getValues().length - 2
                    ].value)
            } else {
              this.selectId = this.$refs.picker.getValues()[0].value
            }
          }

          }
        }
        else { //选择不是地铁就走正常逻辑
          if (this.$refs.picker.getValues()[1]) {
            this.$refs.picker.getValues()[2]
              ? (this.selectId =
                  this.$refs.picker.getValues()[
                    this.$refs.picker.getValues().length - 1
                  ].value)
              : (this.selectId =
                  this.$refs.picker.getValues()[
                    this.$refs.picker.getValues().length - 2
                  ].value)
          } else {
            this.selectId = this.$refs.picker.getValues()[0].value
          }
        }
        this.$refs.item.toggle()

        this.$emit('openSelect', this.title, this.selectId)
      } else {
        this.$refs.item.toggle()
      }
    },
    openSelect(msg) {
      this.$emit('openSelect', msg)
    },
  },
}
</script>

<style lang="less">
.van-picker__columns {
  // height: 200px !important;
  position: absolute;
  top: -30px;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.van-dropdown-item__option {
  display: none;
}

.van-picker {
  height: 70vw !important;
}
.cancel-btn {
  width: 120px;
  height: 50px;
  background-color: #fff;
  color: #21b97a;
  border-radius: 0;
  border: 1px solid #e9e9e9 !important;
}
.determine-btn {
  flex: 1;
  height: 50px;
  border-radius: 0;
  background-color: #21b97a;
  border: 1px solid #e9e9e9 !important;
}
.btn-father {
  display: flex;
  justify-content: center;
  padding: 0 !important;
}
</style>
